<template>
	<view class="list">
		<view class="top">
			<text class="text" v-for="item in tabbar" :class="item.id === current ? 'active' : ''" :key="item.id">
				{{ item.text }}
			</text>
		</view>
		<swiper class="swiper-container" @change="swiperChange" current="current">
			<!-- 未完成 -->
			<swiper-item>
				<view class="notDone-container">
					<div v-for="(timeItem, timeIndex) in dateList" :key="timeIndex">
						<view class="dateTitle" v-if="!timeItem.isAllDone">{{ timeItem.date }}</view>
						<view class="notDone-list" :class="{ active: !timeItem.isAllDone }">
							<view
								class="notDone-list-item"
								:class="item.isMove ? 'goFar' : ''"
								v-for="(item, index) in list"
								:key="item.id"
							>
								<view class="notDoneContent" v-if="timeItem.date === item.date && !item.isDone">
									<view class="notDoneContent-left">
										<checkBox :listItem="item"></checkBox>
										<view class="contentInfo" @touchstart.stop="toEdit(item.id)">{{ item.content }}</view>
									</view>
									<view class="notDoneContent-right">
										<view class="button-container" v-if="item.isChoose">
											<button
												class="modify button"
												size="mini"
												@touchstart="handleModify(item.id)"
												:disabled="!item.isChoose"
											>
												修改
											</button>
											<button
												type="primary"
												size="mini"
												class="done button"
												@touchstart="handleDone(item, index)"
												:disabled="!item.isChoose"
											>
												完成
											</button>
											<button
												type="primary"
												class="delete button"
												:disabled="!item.isChoose"
												size="mini"
												@touchstart="handleDelete(item.id)"
											>
												删除
											</button>
										</view>
										<!-- 这里之所以不用这个组件是因为一旦点击一个选择框全部都会显示，因为他们用的是同一个组件，所以都会收到影响 -->
										<!-- <submitButton :moreMini="true"></submitButton> -->
									</view>
								</view>
							</view>
						</view>
					</div>
				</view>
			</swiper-item>
			<!-- 已完成 -->
			<swiper-item>
				<view class="done-container">
					<view v-for="(timeItem, index) in doneDateList" :key="index">
						<view class="done-top">
							<view class="dateTitle">{{ timeItem.date }}</view>
							<view class="delete-button">
								<button type="primary" size="mini" class="button" @click="handleRemoveRecord(timeItem.date)">
									删除记录
								</button>
							</view>
						</view>
						<view class="done-list" :class="{ active: !timeItem.isAllDone }">
							<view class="done-list-item" v-for="(item, index) in doneList" :key="item.id">
								<view
									class="done-content"
									v-if="timeItem.date === item.date && item.isDone"
									@click="lookDoneItem(item.id)"
								>
									<view class="done-left">
										<view class="info">{{ item.content }}</view>
										<!-- <view class="date">创建日期 : {{ item.date | formatTime }}</view> -->
									</view>
									<view class="done-right">
										<icon type="success_no_circle" class="icon"></icon>
										<!-- <view class="date">完成日期 : {{ item.doneDate }}</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 当手动点击时才显示的区域 -->
		<!-- #ifdef H5 -->
		<!-- <view class="clickShow" v-show="isClick">
			<isDone :doneList="isDone" v-show="showDone"></isDone>
			<notDone :notDoneList="notDone" v-show="!showDone"></notDone>
		</view> -->
		<!-- #endif -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import isDone from '../../components/isDone.vue';
import notDone from '../../components/notDone.vue';
import checkBox from '../../components/checkbox.vue';
// import submitButton from '../../components/submit.vue';
export default {
	mounted() {},
	data() {
		return {
			tabbar: [{ id: 0, text: '未完成' }, { id: 1, text: '已完成' }],
			current: 0,
			animationData: {}
		};
	},
	components: {
		isDone,
		notDone,
		checkBox
		// submitButton
	},
	onLoad() {},
	onUnload() {},
	onReady() {},
	onShow() {},
	computed: {
		...mapState(['list', 'dateList', 'doneList']),
		doneDateList() {
			// 只要找到doneList有的日期就行了
			return this.dateList.filter(timeItem => {
				const dates = this.doneList.filter(item => {
					return timeItem.date === item.date;
				});
				if (dates.length > 0) {
					return timeItem;
				}
			});
		}
	},
	methods: {
		...mapMutations([
			'addToDoneList',
			'deleteListItem',
			'checkList',
			'checkDateList',
			'ModifyStatus',
			'saveFromPage',
			'removeRecord'
		]),
		// 左右切换列表时
		swiperChange(e) {
			this.current = e.detail.current;
		},
		filterNotDoneList(item) {
			return this.list.filter(listItem => {
				return listItem.date === item && listItem.isDone === false;
			});
		},
		filterDoneList(item) {
			return this.list.filter(listItem => {
				return listItem.date === item && listItem.isDone === true;
			});
		},
		// 创建动画
		createAnimation(value) {
			const animation = uni.createAnimation({
				transformOrigin: '50% 50%',
				duration: 500,
				timingFunction: 'ease',
				delay: 0
			});
			if (value) {
				animation.scale(1, 1).step();
			} else {
				animation.scale(0, 0).step();
			}
			this.animationData = animation.export();
		},
		// 点击完成按钮
		handleDone(Item, index) {
			if (Item.isChoose) {
				//通过延迟1毫秒解决和确定按钮重叠也会点到确定按钮的问题
				let _this = this;
				setTimeout(() => {
					uni.showModal({
						title: '消息',
						content: '完成此项任务',
						success(res) {
							// 这个延迟函数是为了动画的
							if (res.confirm) {
								Item.isDone = true;
								// 假如到doneList后要删除list里面对应的数据，再检查list里面还有没有刚刚日期未完成的任务
								_this.addToDoneList(Item);
								_this.deleteListItem(Item);
								_this.checkList(Item.date);
								// 下面的操作是当点击完成后，去查看list中还有没有未完成的，如果有就什么也不做，如果没有了就隐藏对应的日期
								// const hasNotDone = _this.list.filter(item => {
								// 	return item.date === Item.date && !item.isDone;
								// });
								// if (hasNotDone.length === 0) {
								// 	const targetItem = _this.dateList.find(listItem => {
								// 		return listItem.date === Item.date;
								// 	});
								// 	const targetIndex = _this.dateList.find(listItem => {
								// 		return listItem.date === Item.date;
								// 	});
								// 	_this.$set(targetItem, 'isAllDone', true);
								// 	_this.$set(_this.dateList, targetIndex, targetItem);
							}
						}
					});
				}, 100);
			}
		},
		// 点击删除按钮
		handleDelete(item) {
			uni.showModal({
				title: '注意',
				content: '确定删除此项任务',
				success: res => {
					if (res.confirm) {
						this.deleteListItem(item);
						this.checkDateList(item);
					} else {
						return;
					}
				}
			});
		},
		handleModify(id) {
			uni.navigateTo({
				url: `../edit/edit?id=${id}`
			});
			this.ModifyStatus({ showButtons: false, disabled: false, lookDoneItem: false, lookExpiredItem: false });
		},
		toEdit(id) {
			uni.navigateTo({
				url: `../edit/edit?id=${id}`
			});
			this.ModifyStatus({ showButtons: true, disabled: true, lookDoneItem: false, lookExpiredItem: false });
			this.saveFromPage('notDoneList');
		},
		lookDoneItem(id) {
			uni.navigateTo({
				url: `../edit/edit?id=${id}`
			});
			this.ModifyStatus({ showButtons: false, disabled: true, lookDoneItem: true, lookExpiredItem: false });
			this.saveFromPage('doneList');
		},
		// 删除已完成的记录
		handleRemoveRecord(date) {
			uni.showModal({
				title: '提醒',
				content: `删除${date}这个日期下的记录`,
				success: res => {
					if (res.confirm) {
						this.removeRecord({ name: 'doneList', date });
					} else {
						return;
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.list {
	.top {
		width: 100%;
		position: fixed;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		/* #ifdef MP */
		top: 0;
		/* #endif */
		left: 0;
		display: flex;
		z-index: 22;
		background-color: #ffffff;
		.text {
			flex: 1;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #95a5a6;
			border-bottom: 1rpx solid #eeeeee;
			font-size: 30rpx;
			&.active {
				color: #2abb9b;
			}
			&:nth-child(1) {
				border-right: 1rpx solid #eeeeee;
			}
		}
	}

	.swiper-container {
		height: 100vh;
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-top: 62rpx;
		.dateTitle {
			font-size: 40rpx;
			font-weight: bold;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.notDone-container {
			.notDone-list {
				margin-top: 10rpx;
				font-size: 35rpx;
				font-weight: normal;
				&.active {
					border-bottom: 1rpx dashed #e8e8e8;
				}
				.notDone-list-item {
					height: auto;
					font-size: 32rpx;
					color: black;
					margin-bottom: 20rpx;
					transition: all 0.5s;
					// &.goFar {
					// 	animation: farANDdisapper 0.6s;
					// 	animation-iteration-count: 1;
					// }
					.notDoneContent {
						display: flex;
						.notDoneContent-left {
							display: flex;
							align-items: center;
							width: 50%;
							.contentInfo {
								width: 100%;
								margin-left: 10rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
						.notDoneContent-right {
							margin-left: 40rpx;
							align-items: center;
							.button-container {
								display: flex;
								justify-content: center;
								align-items: center;
								transition: all 0.5s;
								transform-origin: center center;
								transform: scale(1);
								.button {
									width: 90rpx;
									height: 50rpx;
									line-height: 50rpx;
									letter-spacing: 2rpx;
									padding: 0;
								}
								.modify {
								}
								.done {
									margin: 0 10rpx;
								}
								.delete {
									width: 90rpx;
									height: 50rpx;
									line-height: 50rpx;
									letter-spacing: 2rpx;
									padding: 0;
									background-color: #d24d57;
									margin-right: 10rpx;
									transition: all 0.5s;
								}
							}
						}
					}
				}
			}
		}

		.done-container {
			.done-top {
				position: relative;
				.delete-button {
					position: absolute;
					top: 0;
					right: 50rpx;
					.button {
						padding: 0 10rpx;
					}
				}
			}

			.done-list {
				font-size: 35rpx;
				font-weight: normal;
				border-bottom: 1rpx dashed #e8e8e8;
				color: #95a5a6;
				.done-list-item {
					.done-content {
						display: flex;
						align-items: center;
						width: 100%;
						height: 60rpx;
					}
					.done-left {
						height: 100%;
						line-height: 60rpx;
						width: 70%;
						.info {
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.done-right {
						width: 30%;
						height: 100%;
						text-align: center;
						line-height: 5rpx;
					}
				}
			}
		}

		.clickShow {
			padding: 30rpx;
			box-sizing: border-box;
			padding-top: 20rpx;
		}
		@keyframes farANDdisapper {
			0% {
				transform: translateX(0);
			}
			100% {
				transform: translateX(-100%);
			}
		}
	}
}
</style>
